<template>
	<view class="">

		<view class="u-flex u-row-between u-padding-20">
			<navigator url="../city/index" hover-class="none" class="u-flex">
				<u-icon name="map-fill" color="#818DFF" size="36"></u-icon>
				<view style="font-size: 30rpx;margin-left: 10rpx;">{{city}}</view>
			</navigator>
			<search :noticeList="HotList" :isInput="false"> </search>
			<view class="" style="position: relative;">
				<u-icon name="chat-fill" color="#818DFF" size="50" :custom-style="{marginLeft:'20rpx'}"></u-icon>
				<button open-type="contact" class="custom-btn"></button>
			</view>
		</view>


		<!-- banner -->
		<u-swiper :list="banner" name="cover" height="400" mode="dot" @click="clkBanner"></u-swiper>
		<!--  -->

		<!-- 宫格 -->
		<u-grid :col="4" :border="false">
			<u-grid-item v-for="(item,index) in classList" :key="index" index="item" @click="clickGrid(item)">
				<u-image :src="item.img" width="80" height="80"></u-image>
				<view style="margin-top: 10rpx;">{{item.txt}}</view>
			</u-grid-item>
		</u-grid>


		<!-- 多少分钟 -->
		<view class="u-flex">
			<view class="shadow" style="width: 45%;font-size: 24rpx;">
				<view style="font-weight: bold;">今日<text
						style="color: #4066F4;font-size: 34rpx;">{{config.freeDesign}}</text>人等待免费设计 </view>
				<view class="$u-type-info u-font-xs u-margin-top-20">10分钟前更新</view>
			</view>
			<view class="shadow" style="width: 45%;font-size: 24rpx;">
				<view style="font-weight: bold;">今日<text
						style="color: #4066F4;font-size: 34rpx;">{{config.caseUpdate}}</text>份效果图已更新 </view>
				<view class="$u-type-info u-font-xs u-margin-top-20">10分钟前更新</view>
			</view>
		</view>


		<!-- 模块 -->
		<view class="u-flex u-row-around u-margin-top-20 u-margin-bottom-20 u-text-center u-font-sm">
			<view @click="goDesign">
				<u-image :src="$ftpUrl('/kanjia.png')" width="220" height="150"></u-image>
				<view style="color: #4066F4;">{{config.bargainNum}}人进行了砍价</view>
			</view>
			<view @click="goPage('/else/flash/index')">
				<u-image  :src="$ftpUrl('/flash.png')" width="220" height="150"></u-image>
				<view style="color: #FF5D39;">{{config.msGoods}}件商品即将抢完</view>
			</view>
			<view @click="goPage('/else/pt/index')">
				<u-image :src="$ftpUrl('/pt.png')"  width="220" height="150"></u-image>
				<view style="color: #EE930A;">{{config.groupBuy}}人已拼团成功</view>
			</view>
		</view>



		<!-- <view>
			<view v-for="(item,index) in caseCate" :key="item.id" class="ClassRow" v-if="caseCate.length">
				<scroll-view :scroll-x="true">
					<view @click="switchChange(index1,index)" v-for="(item1,index1) in item.child" :key="index1"
						class="nav " :class="item.current==index1?'change':''">
						{{item1.cateName}}
					</view>
				</scroll-view>
			</view>

		</view> -->





		<view style="background: #FAFAFA;">
			<view class="u-padding-20">
				<view class="u-font-weight u-font-lg">萌萌推荐 </view>
				<view class="$u-type-info u-margin-top-15">优质案例~精选才优质 </view>


				<view class="u-flex u-margin-top-15">
					<view @click="currentChange(index)" v-for="(item,index) in nav" :key="index" class="navBlock"
						:class="navCurrent==index?'navChange':''">
						<view>{{item.name}}</view>
					</view>
				</view>



			</view>




			<waterfall :list="list" v-if="list.length" @go="go" @poup="poup"></waterfall>

		</view>



		<backTop></backTop>

		<u-mask :show="show" @click="show = false">
			<view class="warp">
				<view class="rect">
					<video :src="$Url(video)" @tap.stop style="width: 100%;height: 100%;"></video>
				</view>
			</view>
		</u-mask>



		<removeWater ref="chilren"  @remove="remove" :goodId='poupInfo.id'></removeWater>


		<u-action-sheet :list="poupList" v-model="poupShow" @click="poupSure"></u-action-sheet>



		<chose-city v-show="false"></chose-city>

		<indexCoupond ref="Coupond"></indexCoupond>

		<u-loadmore :status="status" bg-color="#FAFAFA;" />
	</view>
</template>

<script>
	import removeWater from '@/components/removeWater';
	import {
		mapGetters,
		mapMutations,
		mapState,
	} from 'vuex';
	import search from "../../components/search";
	import waterfall from '../../components/waterfall'
	import backTop from '../../components/backTop'
	import indexCoupond from '@/components/index_coupond'

	export default {
		components: {
			search,
			waterfall,
			indexCoupond,
			backTop,
			removeWater
		},
		data() {
			return {
				video: "",
				show: false,
				ismore: true,
				banner: [],

                 poupInfo:'',
				poupList:[{
					text: '观看全景'
				},{
					text: '去除水印'
				}],
				poupShow: false,


				config: {
					bargainNum: "",
					msGoods: "",
					groupBuy: "",
					freeDesign: "",
					caseUpdate: ""

				},

				caseCate: [],
				HotList: [],

				list: [],
				status: 'loadmore',
				page: 1,

				nav: [{
					name: '效果图',
					type: 1
				}, {
					name: '3D漫游',
					type: 2
				}, {
					name: '看视频',
					type: 3
				}],
				type: 1,
				navCurrent: 0,
				classList: [{
						img: this.$ftpUrl("/index_1.png"),
						txt: '工厂直销',
						url: "/else/factory/index"
					}, {
						img: this.$ftpUrl("/index_2.png"),
						txt: '效果图',
						url: "/else/designSketch/index?id=效果图"
					},
					{
						img: this.$ftpUrl("/index_3.png"),
						txt: '全景漫游',
						url: "/else/designSketch/index?id=全景漫游"
					}, {
						img: this.$ftpUrl("/index_4.png"),
						txt: '自学装修',
						url: "/pages/designLeaning/index"
					}, {
						img: this.$ftpUrl("/index_5.png"),
						txt: '同城门店',
						url: "/pages/onlineStore/index"
					}, {
						img: this.$ftpUrl("/index_6.png"),
						txt: '领券中心',
						url: "/pages/vouchCenter/index"
					}, {
						img: this.$ftpUrl("/index_7.png"),
						txt: '风格测试',
						url: "/pages/styleTest/index"
					}, {
						img: this.$ftpUrl("/index_8.png"),
						txt: '户型诊断',
						url: "/else/house/index"
					}
				]
			}
		},
		watch: {
			show(v) {
				if (!this.show) {
					this.video = ''
				}
			},

		},
		computed: {
			...mapGetters(['city']),
			...mapState(['userInfo'])
		},
		methods: {

			currentChange(e) {
				this.navCurrent = e;
				this.page = 1;
				this.list = [];
				this.type = this.nav[e].type;
				this.getCases()
			},
			goDesign() {
				uni.navigateTo({
					url: '/else/DesignBook/index'
				})
			},
			goPage(e) {
				uni.navigateTo({
					url: e
				})
			},
			
			remove(){
				this.page = 1;
				this.list = [];
				this.getCases()
				this.$refs.chilren.show=false
			},
			poupSure(e){
				
				if(!e){
					uni.navigateTo({
						url: '/pages/web/index?url=' + this.poupInfo.url
					})
				}else{
					this.poupShow=false;
					this.$refs.chilren.show=true;
				}
				
			},
			poup(item){
				if(this.navCurrent == 1) {
					if(item.vip){
						uni.navigateTo({
							url: '/pages/web/index?url=' + item.url
						})
					}else{
						this.poupInfo=item;
						this.poupShow=true;
					}
				}
			},
			go(item) {
				if (this.navCurrent == 2) {
					this.show = true;
					this.video = item.video
				} else if(this.navCurrent == 0) {
					uni.navigateTo({
						url: '/else/designSketch/detail?id=' + item.id
					})
				} else if(this.navCurrent == 1) {
					
					if(item.vip){
						uni.navigateTo({
							url: '/pages/web/index?url=' + item.url
						})
					}else{
						this.poupInfo=e;
						this.poupShow=true;
					}
				}

			},
			switchChange(index1, index) {
				this.page = 1;
				this.$set(this.caseCate[index], "current", index1);
				this.getCases()
			},
			focus() {
				this.ismore = false
			},
			blur() {
				this.ismore = true
			},
			clickGrid(item) {
				uni.navigateTo({
					url: item.url
				})
			},
			clkBanner(item) {
				var id = this.banner[item].link
				if (id.indexOf("http") == -1) {
					uni.navigateTo({
						url: id
					})
				} else {
					uni.navigateTo({
						url: "../web/index?src=" + id
					})
				}
			},
			getBanner() {
				this.$u.post('/index/banner', {
					"classify": 1
				}).then(res => {
					this.banner = res;
				}).catch(err => {})
			},

			// 热门搜索
			hotSearch() {
				this.$u.post('/index/hotSearch', {

				}).then(res => {
					this.HotList = res;
				}).catch(err => {})
			},


			// 系统配置
			getData() {
				this.$u.post('/index/data', {

				}).then(res => {
					this.config = res;
				}).catch(err => {})
			},
			// 分类案例列表
			getCaseCate() {
				return new Promise((resolve, reject) => {
					this.$u.post('/index/caseCate', {}).then(res => {
						res.forEach(item => {
							item.current = 0;
							item.child.unshift({
								cateName: "全部" + item.cateName,

							})
						})
						this.caseCate = res;
						resolve(res)
					}).catch(err => {})

				})
			},

			// 案例列表
			getCases() {
				// var Obj = {};
				// this.caseCate.map(item => {
				// 	Obj[item.child[item.current].enName] = item.child[item.current].id
				// })
				if (this.navCurrent == 2) {
					var url = '/index/video'
				} else {
					var url = '/index/cases'
				}
				this.$u.post(url, {
					type: this.type,
					case_type: "",
					// cate: Obj,
					page: this.page,
				}, {
					"Content-Type": "application/json",
				}).then(res => {
					this.status = 'loading'
					var resList = res;
					if (this.page == 1) {
						this.list = []
					}
					if (resList.length > 9) {
						this.status = 'loadmore'
						this.page++
					} else {
						this.status = 'nomore'
					}
					this.list = this.list.concat(resList)
					this.loading = false
				}).catch(err => {})
			}

		},
		async onLoad() {

			this.getBanner()
			await this.getCaseCate()
			this.getCases()
			this.hotSearch()


		},
		onShow() {
			this.getData()

			this.$refs.Coupond.showPoup()

		},
		onReachBottom() {

			if (this.status == 'nomore') {

			} else {
				this.getCases()
			}
		}
	}
</script>

<style lang="scss">
	.nav {
		padding: 7rpx 15rpx;
		border: 1rpx solid #BEBEBE;
		color: #BEBEBE;
		margin-right: 20rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		text-align: center;
		display: inline-block;
	}

	.change {
		border: 1rpx solid #4066F4;
		color: #4066F4;
		opacity: 1;
		transition: all 0.3s;
	}

	.ClassRow {


		white-space: nowrap;
		width: 700rpx;
		margin: auto;

	}

	.navBlock {
		padding: 10rpx 25rpx;
		background: #EDEDED;
		border-radius: 10rpx;
		text-align: center;
		color: #9999;
		margin-right: 20rpx;
	}

	.navChange {
		color: #fff;
		background: #4066F4;
		transition: all 0.3s;
	}


	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 400px;
		height: 400px;
		background-color: #fff;
	}
</style>
